import React,{ useEffect, useState } from 'react';
import CustHd02 from '../utils/CustHd02';

import IntCode from '../../../utils/IntCode';
import { 
    isValidCode, isMobile, isEmpty, dealRes, 
} from '../../../utils/CommonUtils';
import { funcQueryAddress } from '../../../../api';

import { Toast } from 'antd-mobile';
import { ValidCode, } from '../../../../common/js/Options';

/**
 * 历史收货人方式身份验证
 * @param {*} props 
 * @returns 
 */
function AddrSendTone (props){

    const { findPwdData } = props;

    const [ vcode, setVcode ] = useState('');
    const [ mobile, setMobile ] = useState('');
    /** 登录按钮禁用状态 */ 
    const [ disableBtn, setDisableBtn ] = useState(true);
    /** 当前操作输入框 */
    const [ currentName, setCurrentName ] = useState('');
    const [ txtCodeTime, setTxtCodeTime ] = useState('获取验证码');

    useEffect(() => {}, [ vcode, txtCodeTime ]);

    useEffect(()=> { selectAddress() },[ mobile ]);// eslint-disable-line react-hooks/exhaustive-deps
    
    const doGetCode = () => {
        if(isEmpty(mobile)) {
            Toast.show({content: '请输入手机号码'});
            return false;
        }
        if(!isMobile(mobile)) {
            Toast.show({content: '请输入正确的手机号码'});
            return false;
        }
        // 发起 ajax 请求

        return true;
    }

    const doOption = (e, setFunc) => setFunc(e.target.value);

    const onIntFocus = (e) => {
        if(vcode){
            setDisableBtn(false);
        } else {
            setDisableBtn(true);
        }
        setCurrentName('vcode');
    }

    const doNext = () => {
        setCurrentName('');
    }

    /** - - - - - - - - - 数据服务 - - - - - - - - - */
    const selectAddress = async () => {
        const params = {};
        params.name = findPwdData;
        const result = dealRes(await funcQueryAddress(params));
        if(result) {
            setMobile(result);
        }
    }
    /** - - - - - - - - - 数据服务 - - - - - - - - - */

    return (
        <div data-v2310001='' style={{ margin: '0 .35rem' }}>
            <CustHd02
                nick={'朱晓宇'}
                desc={'验证码将发送到绑定的手机号'}
                src={require('../../../../common/images/logo5.gif')}
            />
            
            <IntCode name={'vcode'} intValue={vcode} 
                currentName={currentName} icon={<ValidCode/>} desc='请输入验证码'
                onBlur={()=> setCurrentName('')}
                doValid={v => isValidCode(v)} getCode={()=> doGetCode()} setValue={v=> setVcode(v)}
                doFocus={(e)=> onIntFocus(e)} doChange={(e)=> doOption(e, setVcode)} maxLen={6}
                txtCodeTime={txtCodeTime} setTextCode={setTxtCodeTime} placeholder='请输入验证码'/>

            <div className='w-next'>
                <button style={{ fontSize: '.16rem' }} children='下一步' onClick={()=> doNext()}
                    className={`w-btn w-mk-btn w-wd_10 w-ris-dot2${disableBtn ? ' w-disable' : ''}`} />
            </div>
        </div>
    )
}
export default AddrSendTone ;